<template>
    <el-dialog v-model="isShow" title="用户详情：" draggable destroy-on-close append-to-body>
        <div class="itemSty flex_str_str">
            <div>用户昵称：</div>
            <div class="conSty">{{ userInfo.nickName }}</div>
        </div>
        <div class="itemSty flex_str_str">
            <div>手机号：</div>
            <div class="conSty">{{ userInfo.mobile }}</div>
        </div>
        <div class="itemSty flex_str_str">
            <div>头像：</div>
            <div></div>
        </div>
        <div class="itemSty flex_str_str">
            <div>状态：</div>
            <div>{{ userInfo.enableFlagName }}</div>
        </div>
        <div class="itemSty flex_str_str" v-if="userInfo.status == 0">
            <div>禁用原因：</div>
            <div>{{ userInfo.disableReason }}</div>
        </div>
        <div class="itemSty flex_str_str" v-if="userInfo.status == 0">
            <div>禁用时间：</div>
            <div>{{ formatToDateTime(userInfo.disableTime) }}</div>
        </div>
        <div class="itemSty flex_str_str">
            <div>注册时间：</div>
            <div>{{ userInfo.createTime }}</div>
        </div>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button type="primary" @click="cancel">
                    确定
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref, toRefs, watch } from 'vue'
import { seeUserInfoApi } from '@/api/index/index'
import { ElMessage } from 'element-plus';
import { formatToDateTime } from '@/utils/moment'
const props = defineProps({
    isShow: {
        type: Boolean,
        defaul: false
    },
    id: {
        type: Number,
        default: 0
    }
})
const emit = defineEmits(['close'])
const { isShow, id } = toRefs(props)
const userInfo = ref<any>({
    nickName: '',
    mobile: '',
    enableFlagName: '',
    disableReason: '',
    disableTime: '',
    createTime: ''
})
const cancel = () => {
    emit('close')
}
const adoptFun = () => {
    seeUserInfoApi({
        id: id.value
    }).then((res: any) => {
        userInfo.value = res.data
    })
}
watch(() => id.value,
    () => {
        adoptFun()
    })
</script>
<style scoped>
.itemSty {
    margin: 20px 0;

}

.conSty {
    /* min-width: 200px;
    min-height: 24px; */
}

.textSty {
    width: 400px;
    height: 200px;
    resize: none;
}

.dialog-footer button:first-child {
    margin-right: 10px;
}
</style>